<style>
  .card:active{
    background:#d9d9d9;
    transition-duration: 0ms;
  }
  .list-block .item-content,.card-footer {padding-left: 2rem;}
  .button-bottom {border-top: none;}
  .button-bottom .submit-button{
    background: #4cd964 ;
    height: 100%;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
  }

  .card-footer .amount[type="number"] {
    width: 60px;
    height: auto;
    text-align: center;
    background: #fafafa;
    font-size: .7rem;
    padding: 0;
  }
  .plus,.minus {
    width: 24px;
    line-height: 22px;
    height: 24px;
    text-align: center;
    background: #e7e7e7;
  }
  .minus.isone {color: #ccc;}
  .p-check {
    width: 2rem;
    height: 100%;
    position: absolute;
    padding: 0 .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }


  /*popup*/
  .popup ul,.popup li {list-style: none;padding: 0;margin: 0;}

  .close-popup {
    position: absolute;
    top: 0;
    right: .3rem;
    color: #CC3300;
    font-size: 2rem;
    opacity: .8;
    line-height:normal;
  }

  .buttons-tab {
    background: none;
    border-bottom: none;
  }
  .buttons-tab .button {
    /*border-bottom: none;*/
    font-size: .6rem;
  }
  .address {
    padding-right: .75rem;
    font-size: .6rem;
    text-align: right;
    color: #0894ec;
  }

  .address-list {
    background: #fff;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    padding-left: .75rem;
    margin: .25rem 0 .75rem;
    position: relative;
  }

  .selected:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-color: #0894ec transparent transparent #0894ec;
    border-width: .5rem;
    border-style: solid;
    left: 0;
    top: 0;
    z-index: 9999;
  }
</style>
<div class="page">
  <header class="bar bar-nav">
    <h1 class="title">购物车</h1>
  </header>

  <div class="content" style="margin-bottom: 50px;">
    <div class="list-container list-block" style="margin:0;height: 100%;overflow: auto;">
      <!--<div class="list-block">-->
      <ul class="product-list-container" style="border: none;margin-top: 10px;margin-bottom: 60px;">

        <!--<li class="swipeout" style="border-bottom: 1px solid #e7e7e7;">-->
          <!--&lt;!&ndash; Usual list element wrapped with "swipeout-content" &ndash;&gt;-->
          <!--<div class="swipeout-content">-->
            <!--&lt;!&ndash; Your list element here &ndash;&gt;-->
            <!--<div class="card product" style="margin: 0;height: 100px;">-->
              <!--<label class="p-check label-checkbox">-->
                <!--<input type="checkbox" name="cart-check">-->
                <!--<div class="item-media"><i class="icon icon-form-checkbox"></i></div>-->
              <!--</label>-->
              <!--<div class="card-content">-->
                <!--<div class="list-block media-list">-->

                  <!--<div class="item-content">-->

                    <!--<div class="item-media">-->
                      <!--<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">-->
                    <!--</div>-->
                    <!--<div class="item-inner elip" style="border: none;">-->
                      <!--<div class="item-title-row">-->
                        <!--<div class="item-title elip">A2 Platinum Infant Formula Stage 1</div>-->
                      <!--</div>-->
                      <!--<div class="item-subtitle elip">白金系列1段婴儿配方奶粉</div>-->
                    <!--</div>-->
                  <!--</div>-->

                <!--</div>-->
              <!--</div>-->
              <!--<div class="card-footer" style="border-top: none;border-radius:0;padding-top: 0;min-height: 1rem;">-->
                <!--<span>规格：900G</span>-->
                <!--<span style="color:#CC3300;">￥666</span>-->
                <!--<span class="count" style="display: flex;padding: 20px;margin: -20px;">-->
                          <!--<i style="line-height: 12px;border-radius: 2px 0 0 2px;color: #bbb;" class="minus">_</i>-->
                          <!--<input class="amount" type="number" pattern="[0-9]*" value="1" />-->
                          <!--<i style="border-radius: 0 2px 2px 0;" class="plus">+</i>-->
                        <!--</span>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->

          <!--&lt;!&ndash; Swipeout actions right &ndash;&gt;-->
          <!--<div class="swipeout-actions-right">-->
            <!--&lt;!&ndash; Swipeout actions links/buttons &ndash;&gt;-->
            <!--<a href="#" style="background: #CC3300;">删除</a>-->
            <!--&lt;!&ndash;<a class="swipeout-close" href="#">Action 2</a>&ndash;&gt;-->
          <!--</div>-->
        <!--</li>-->




      </ul>
      <!--</div>-->
    </div>
    <div class="button-bottom bar bar-tab">
      <!--<div class="choose-button">选择商品</div>-->
      <div class="row no-gutter">
        <div class="col-25 select-all" style="line-height: 2.5rem;">
          <label class="label-checkbox item-content">
            <input class="select-all" type="checkbox" name="select-all">
            <div class="item-media" style="display: flex;align-items: center;">
              <i class="icon icon-form-checkbox" style="margin: 0 .5rem;"></i><span>全选</span>
            </div>

          </label>

        </div>
        <div class="col-50" style="line-height: 2.5rem;text-align: center;">总计￥666</div>
        <div class="col-25 submit-button open-about">提交订单</div>
        <!--<div class="col-25 cancel-button">取消</div>-->
      </div>
    </div>
  </div>









</div>
<!--popup-->
<div class="popup popup-about">
  <div class="content-block" style="overflow: auto;height: 100%;background:#EFEFF4;margin: 0;padding: 0;">
    <div>
      <div class="content-block-title">
        订单商品
      </div>
      <ul style="border-top: 1px solid #e7e7e7;background: #fff;">
        <!--<li class="row" style="border-bottom: 1px solid #e7e7e7;">-->
          <!--<div class="col-50">-->
            <!--<div class="elip">白金系列1段婴儿配方奶粉</div>-->
            <!--<div>900G</div>-->
          <!--</div>-->
          <!--<div class="col-25">x3</div>-->
          <!--<div class="col-25">￥666</div>-->
        <!--</li>-->

      </ul>
      <div style="padding: .5rem 1rem;text-align: right;font-weight: 500;">总计 ￥10000</div>
      <div class="content-block-title" style="margin-top: .75rem;margin-bottom: 0;">
        <div>收件信息</div>
      </div>

      <div class="buttons-tab" style="margin: .25rem 0 .75rem;">
        <a href="#tab1" class="tab-link active button">我的地址</a>
        <a href="#tab2" class="tab-link button">上门自取</a>
      </div>
        <div class="tabs">
          <div id="tab1" class="tab active">
            <div class="address">修改收件信息</div>
            <div class="address-list list-block media-list">
                <div class="item-inner" style="background: none;border: none;">
                  <div class="item-title-row">
                    <div class="item-title">张三</div>
                    <div class="item-after">15106205583</div>
                  </div>
                  <div class="item-subtitle">江苏省苏州市</div>
                  <div class="item-text">什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号</div>
                </div>
            </div>
          </div>
          <div id="tab2" class="tab">
              <div class="my-address address-list selected list-block media-list">
                <div class="item-inner" style="background: none;border: none;">
                  <div class="item-title-row">
                    <div class="item-title">zhangsan</div>
                    <div class="item-after">12345678</div>
                  </div>
                  <div class="item-subtitle">澳大利亚</div>
                  <div class="item-text">什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号</div>
                </div>
              </div>
              <div class="my-address address-list list-block media-list">
                <div class="item-inner" style="background: none;border: none;">
                  <div class="item-title-row">
                    <div class="item-title">zhangsan</div>
                    <div class="item-after">12345678</div>
                  </div>
                  <div class="item-subtitle">澳大利亚</div>
                  <div class="item-text">什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号</div>
                </div>
              </div>
              <div class="my-address address-list list-block media-list">
                <div class="item-inner" style="background: none;border: none;">
                  <div class="item-title-row">
                    <div class="item-title">zhangsan</div>
                    <div class="item-after">12345678</div>
                  </div>
                  <div class="item-subtitle">澳大利亚</div>
                  <div class="item-text">什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号</div>
                </div>
              </div>
          </div>
        </div>


    </div>

    <p style="margin: 1rem 1rem 2rem;"><a href="#" class="button button-fill submit-button-ok">确认提交</a></p>
    <!--<p><a href="#" class="button submit-button-ok">确认提交</a></p>-->


  </div>
  <div class="close-popup iconfont icon-close"></div>
</div>
<script>
  $(function(){
    $.showIndicator();
    var cartcheck = JSON.parse(localStorage.getItem('cartcheck')) || [];
    console.log(cartcheck,"cartcheck");

    $.get('/user/cart',function(res,status){
      var html='';
      console.log(res,"cart-res",status);
      for (var i in res.record){
        html += '<li data-pid="' + res.record[i].productId + '" class="swipeout" style="border-bottom: 1px solid #e7e7e7;">' +
          '<div class="swipeout-content"><div class="card product" style="margin: 0;height: 100px;">' +
          '<label class="p-check label-checkbox"><input class="cart-check" type="checkbox" name="cart-check">' +
          '<div class="item-media"><i class="icon icon-form-checkbox"></i></div></label><div class="card-content">' +
          '<div class="list-block media-list"><div class="item-content"><div class="item-media">' +
          '<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">' +
          '</div><div class="item-inner elip" style="border: none;"><div class="item-title-row">' +
          '<div class="item-title elip">A2 Platinum Infant Formula Stage 1</div></div>' +
          '<div class="item-subtitle elip">' + res.record[i].info.name + '</div></div></div></div></div>' +
          '<div class="card-footer" style="border-top: none;border-radius:0;padding-top: 0;min-height: 1rem;">' +
          '<span class="spec">规格：900G</span><span class="price" style="color:#CC3300;">￥666</span>' +
          '<span class="count" style="display: flex;padding: 20px;margin: -20px;">' +
          '<i style="line-height: 12px;border-radius: 2px 0 0 2px;" class="minus ' + (res.record[i].amount == 1 ? "isone" : "") + '">_</i>' +
          '<input class="amount" type="number" pattern="[0-9]*" value="' + res.record[i].amount + '" />' +
          '<i style="border-radius: 0 2px 2px 0;" class="plus">+</i></span></div></div></div>' +
          '<div class="swipeout-actions-right"><a href="#" class="cart-del" style="background: #CC3300;">删除</a></div></li>';
      }
      $('.product-list-container').html(html);
      $('.product-list-container .swipeout:eq(0)').css('border-top','1px solid #e7e7e7');
      $.hideIndicator();

//      for(var i in cartcheck){
//        $('.cart-check').eq(cartcheck[i].i).prop('checked',true);
//      }
      $('.swipeout').each(function(){
          for(var j in cartcheck){
              if($(this).data('pid') == cartcheck[j].id){
                  $(this).find('.cart-check').prop('checked',true);
              }
          }
      });

      //没有商品，不能点全选
      if($('.cart-check').length == 0){
        $('.select-all').prop({
          'disabled' : true,
          'checked' : false,
        });
        localStorage.removeItem('isSelectAll');
      }

      var isSelectAll = localStorage.getItem('isSelectAll');
      //新添加了商品，不是全选
      if(cartcheck.length < $('.swipeout').length){
        isSelectAll = 0;
      }
//      console.log(isSelectAll,'isSelectAll');
      $('input.select-all').prop('checked',isSelectAll == 1 ? true : false);
    });

    //购物车点击
    $(document).on('click','.product',function(){
//      console.log($(this));
      window.location.href = 'detail';
    });
    //订单点击
    $(document).on('click','.order',function(){
      $(this).find('.card-detail').slideToggle();
    });

    //取消冒泡
    $(document).on('click','.card-footer .count',function(e){
      e.stopPropagation();
    });
    //点击选择商品
    $(document).on('click','.p-check',function(e){
      e.stopPropagation();
      $(this).find('.p-check-button').toggleClass('ok');
    });

    //输入数量
    $(document).on('change','.card-footer .amount',function(){
      $(this).val(function(){
        return $(this).val() == 0 ? 1 : Number($(this).val());
      });
      if($(this).val() == 1){
        $(this).siblings('.minus').addClass('isone');
      }else{
        $(this).siblings('.minus').removeClass('isone');
      }

//      post
      var pid = $(this).parents('.swipeout').data('pid');
      var amount = $(this).parents('.swipeout').find('.amount').val();
      $.post('/user/deleteFromCart',{productId: pid, amount: amount});

    });

//    加减数字
    function count($this,isPlus,e){
      e.stopPropagation();
      var $thisVal = $this.siblings('input');
      var amount = Number($thisVal.val());
      if(!isPlus && amount == 1) return;
      //判断正整数
      if(Number.isInteger(amount) && amount >= 1){
        $thisVal.val(function(){
          return isPlus ? Number($thisVal.val()) + 1 : Number($thisVal.val()) - 1;
        });
//        $thisVal.val() == 1 ? $('.minus').css('color','#bbb') : $('.minus').css('color','#5f646e');

        if($thisVal.val() == 1){
          $this.addClass('isone');
        }else{
          $this.siblings('.minus').removeClass('isone');
        }
      }else{
        $.toast("商品数量错误");
        $thisVal.val("1");
      }

      //post
      var pid = $this.parents('.swipeout').data('pid');
      var amount = $this.parents('.swipeout').find('.amount').val();
      $.post('/user/deleteFromCart',{id: pid, amount: amount});

    }
    $(document).on('click','.plus',function(e){
      count($(this),true,e);
    });
    $(document).on('click','.minus',function(e){
      count($(this),false,e);
    });


    //选择商品
    $(document).on('change','.cart-check',function(){
      cartcheck = [];
      $('.cart-check').each(function(i){
          if($(this).is(':checked')){
            cartcheck.push({id : $(this).parents('.swipeout').data('pid')});
            if(cartcheck.length == $('.cart-check').length){
              $('input.select-all').prop('checked',true);
              localStorage.setItem('isSelectAll',1);
            }
          }else{
            $('input.select-all').prop('checked',false);
            localStorage.setItem('isSelectAll',0);
          }
      });
      console.log(cartcheck,"cartcheck");
      localStorage.setItem('cartcheck',JSON.stringify(cartcheck));
    });

    //删除商品
    $(document).on('click','.cart-del', function () {
      $.showIndicator();
      var pid = $(this).parents('.swipeout').data('pid');
      var _this = $(this);
      var pid = _this.parents('.swipeout').data('pid');
//      var amount = $(this).parents('.swipeout').find('.amount').val();
      $.showIndicator();
      $.post('/user/deleteFromCart',{id: pid, amount: 0},function(res, status){
//        console.log(res, status);
        _this.parents('.swipeout').remove();
        $.hideIndicator();
        $.toast('删除成功');

        for(var i in cartcheck){
            if(pid == cartcheck[i].id){
                cartcheck.splice(i,1);
            }
        }
        localStorage.setItem('cartcheck',JSON.stringify(cartcheck));

        // 删完－－－>全删了
        if($('.cart-check').length == 0){
          $('.select-all').prop({
            'disabled' : true,
            'checked' : false
          });
          localStorage.removeItem('isSelectAll');
        }

        // 删完－－－>全选了
        if($('.cart-check').length == cartcheck.length){
          $('input.select-all').prop('checked',true);
          localStorage.setItem('isSelectAll',1);
        }

      });
//      cartcheck.splice($(this).index(),1);
//      localStorage.setItem('cartcheck',JSON.stringify(cartcheck));


    });

    //全选
    $('input.select-all').change(function(){
        if($(this).is(':checked')){
          $('.cart-check').prop("checked", true);
          $('.swipeout').each(function(){
            cartcheck.push({id : $(this).data('pid')});
          });
          localStorage.setItem('isSelectAll',1);
        }else{
          $('.cart-check').prop('checked',false);
          cartcheck = [];
          localStorage.setItem('isSelectAll',0);
        }
      localStorage.setItem('cartcheck',JSON.stringify(cartcheck));

    });

    //上门自取
    $('.my-address').click(function(){
        $(this).addClass('selected').siblings('.my-address').removeClass('selected');
    });

    //提交订单->popup
    $(document).on('click','.open-about', function () {
      var html = '';
      $('.swipeout').each(function(){

        if($(this).find('.cart-check').is(':checked')){
//          console.log($(this).data('pid'));
          html += '<li class="row" style="border-bottom: 1px solid #e7e7e7;padding: .4rem 0;font-size: .8rem;">' +
            '<div class="col-60"><div class="elip">' + $(this).find('.item-subtitle').text() + '</div>' +
            '<div>' + $(this).find('.spec').text() + '</div></div>' +
            '<div class="col-15">x' + $(this).find('.amount').val() + '</div><div class="col-25">' + $(this).find('.price').text() + '</div></li>';
        }
      });
      $('.popup-about ul').html(html);
      if($('.popup-about ul li').length == 0){
        $.toast('请选择商品');
        return;
      }
      $.popup('.popup-about');
    });

    //修改收件信息
    $('.address').click(function(){
        window.location.href = "/user/address";
    });

    //确认订单->提交
    $('.submit-button-ok').click(function(){

      //提交还没做
      var products = [[9421902960031, 2]];
      $.post('/addOrder', {product: products}, function (result, call) {
        //if (err) { console.log(err) };
        window.location.href='/paymentMethod/'+result.orderId;
        console.log(call)
        //window.location.href='/paymentMethod/'+call.orderId;
      });

      localStorage.removeItem('cartcheck');
      localStorage.removeItem('isSelectAll');
    });


  });
</script>
